<template>
	<view class="searchBar">
		<input type="test" placeholder="搜索书名,作者,分类,ISBN" />
		<image class="search" src="/static/search.svg" mode="widthFix"></image>
		<view class="sort">
			<image src="/static/sort.svg" mode="widthFix"></image>
			<text>分类</text>
		</view>
	</view>
	<view class="content">
		<view class="left flow">
			<view class="books" v-for="(v, i) in arr">
				<view class="book" v-if="i % 2 == 0">
					<image :src="v.image" mode="widthFix" class="image"></image>
					<view class="name"> {{v.name }} </view>
					<view class="tags">
						<view class="tag" v-for="(t, _) in v.tag" :key="i">
							# {{ t }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="right flow">
			<view class="books" v-for="(v, i) in arr">
				<view class="book" v-if="i % 2 == 1">
					<image :src="v.image" mode="widthFix" class="image"></image>
					<view class="name"> {{v.name }} </view>
					<view class="tags">
						<view class="tag" v-for="(t, _) in v.tag" :key="i">
							# {{ t }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const arr = ref([
	{
		image: '/static/books/f11e35a0c33511edbf559ea155916710.webp',
		name: '人类灭绝',
		tag: [],
		type: 0
	},
	{
		image: '/static/books/106eb7a6530011e795fc00163e063441.webp',
		name: '蝙蝠侠：缄默',
		tag: ['DC'],
		type: 0
	},
	{
		image: '/static/books/1fb6d876806011e9884802420a000017.webp',
		name: '悬崖上的谋杀',
		tag: ['阿加莎·克里斯蒂'],
		type: 0
	},
	{
		image: '/static/books/a3142fc0aa0d11eabbfc02420a00035f.webp',
		name: '当历史可以观看',
		tag: ['理想国', '文化'],
		type: 0
	},
	{
		image: '/static/books/6f57725c7dc811eb9a46269459b19c62.webp',
		name: '你的名字',
		tag: ['天闻海角', '日本'],
		type: 0
	},
	{
		image: '/static/books/c3ce973af75211eb92c7c657e9fb7f64.webp',
		name: '白鲸',
		tag: ['美国文学'],
		type: 0
	},
])


</script>

<style lang="scss" scoped>
	.searchBar {
		display: flex;
		padding: 10rpx 0rpx;
		position: fixed;
		width: 100%;
		background-color: white;
		z-index: 1;
		.search {
			width: 60rpx;
			position: absolute;
			left: 30rpx;
			top: 20rpx;
		}
		input {
			width: 520rpx;
			padding: 25rpx;
			padding-left: 70rpx;
			margin: 0 25rpx;
			border-radius: 30rpx;
			background-color: #FAFAFA;
		}
		.sort {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// font-size: 25rpx;
			image {
				width: 40rpx;
			}
		}
	}
	.content {
		display: flex;
		background-color: $gal-bg-color-grey;
		padding-top: 120rpx;
		// align-items: center;
		justify-content: center;
		.flow {
			width: 360rpx;
			// background-color: pink;
		}
		.book {
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 15rpx;
			.image {
				background-color: skyblue;
				height: 270rpx;
				width: 70%;
				margin: 20rpx 20rpx;
				margin-top: 30rpx;
			}
			
			.name {
				font-weight: 700;
			}
			
			.tags {
				display: flex;
				margin: 17rpx 0;
				.tag {
					background-color: #F7F7F7;
					margin: 5rpx;
					padding: 8rpx 13rpx;
					border-radius: 20rpx;
					color: green;
					font-weight: 700;
				}
			}
		}
	}
	
	
</style>
